1 <md-dialog class="dashboarditem-dialog" aria-label="New DashboardItem">
 
   2   <form name="dashboarditemForm" class="md-inline-form" novalidate>
 
   3     <md-toolbar class="md-accent md-hue-2">
 
   5         class="md-toolbar-tools"
 
   7         layout-align="space-between center"
 
   9         <span class="title">{{ vm.title | translate }}</span>
 
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
 
  12             md-font-icon="icon-close"
 
  13             aria-label="Close dialog"
 
  19     <md-dialog-content ms-scroll>
 
  20       <div class="error-list">
 
  22           ng-repeat="error in vm.errors"
 
  25           layout-align="space-between center"
 
  28             <span class="message">{{error.message}}</span>
 
  29             <span class="type">({{error.type}})</span>
 
  31           <md-button class="md-icon-button">
 
  33               md-font-icon="icon-alert-box"
 
  34               aria-label="alert error"
 
  40       <md-input-container class="md-block">
 
  41         <label translate="TOOLS.TYPE">Type</label>
 
  44           ng-model="vm.dashboarditem.type"
 
  46           ng-disabled="!vm.newDashboardItem"
 
  48           <md-option ng-value="'counter'">
 
  49             {{ 'TOOLS.COUNTER' | translate }}
 
  52           <md-option ng-value="'multibar-chart'">
 
  53             {{ 'TOOLS.MULTIBARCHART' | translate }}
 
  56           <md-option ng-value="'pie-chart'">
 
  57             {{ 'TOOLS.PIECHART' | translate }}
 
  60           <md-option ng-value="'web-report'">
 
  61             {{ 'TOOLS.WEBREPORT' | translate }}
 
  64           <md-option ng-value="'iframe'">
 
  65             {{ 'TOOLS.IFRAME' | translate }}
 
  68           <md-option ng-value="'clock'">
 
  69             {{ 'TOOLS.CLOCK' | translate }}
 
  72           <md-option ng-value="'custom'">
 
  73             {{ 'TOOLS.CUSTOMTYPE' | translate }}
 
  77           ng-messages="dashboarditemForm['type'].$error"
 
  78           ng-show="dashboarditemForm['type'].$touched"
 
  81           <div ng-message="required">
 
  82             <span translate="TOOLS.ERRORS.TYPE_REQUIRED"
 
  83               >Type field is required</span
 
  88       <md-input-container class="md-block">
 
  89         <label translate="TOOLS.TITLE">Title</label>
 
  93           ng-model="vm.dashboarditem.title"
 
  99           ng-messages="dashboarditemForm['title'].$error"
 
 100           ng-show="dashboarditemForm['title'].$touched"
 
 103           <div ng-message="required">
 
 104             <span translate="TOOLS.ERRORS.TITLE_REQUIRED"
 
 105               >Title field is required</span
 
 108           <div ng-message="md-maxlength">
 
 110               translate="TOOLS.ERRORS.TITLE_MAX_LENGTH"
 
 111               translate-values="{max: 255}"
 
 112               >Title must have a maximum length equal to 255</span
 
 116       </md-input-container>
 
 118         ng-if="vm.dashboarditem.type == 'iframe'"
 
 121         <label translate="TOOLS.URL">Url</label>
 
 125           ng-model="vm.dashboarditem.attrUrl"
 
 130           ng-messages="dashboarditemForm['attrUrl'].$error"
 
 131           ng-show="dashboarditemForm['attrUrl'].$touched"
 
 134           <div ng-message="required">
 
 135             <span translate="TOOLS.ERRORS.URL_REQUIRED"
 
 136               >Url field is required</span
 
 139           <div ng-message="url">
 
 140             <span translate="TOOLS.ERRORS.URL_MUST_VALID_URL"
 
 141               >Url must be a valid url http://www.xcally.com</span
 
 145       </md-input-container>
 
 147         ng-if="vm.dashboarditem.type == 'custom'"
 
 150         <label translate="TOOLS.PATH">Path</label>
 
 154           ng-model="vm.dashboarditem.attrPath"
 
 159           ng-messages="dashboarditemForm['attrPath'].$error"
 
 160           ng-show="dashboarditemForm['attrPath'].$touched"
 
 163           <div ng-message="required">
 
 164             <span translate="TOOLS.ERRORS.PATH_REQUIRED"
 
 165               >Path field is required</span
 
 169       </md-input-container>
 
 171         ng-if="vm.dashboarditem.type == 'clock'"
 
 174         <label translate="TOOLS.FORMAT">Format</label>
 
 177           name="attrHourFormat"
 
 178           ng-model="vm.dashboarditem.attrHourFormat"
 
 183           ng-messages="dashboarditemForm['attrHourFormat'].$error"
 
 184           ng-show="dashboarditemForm['attrHourFormat'].$touched"
 
 187           <div ng-message="required">
 
 188             <span translate="TOOLS.ERRORS.FORMAT_REQUIRED"
 
 189               >Format field is required</span
 
 193       </md-input-container>
 
 195         ng-if="vm.dashboarditem.type == 'clock'"
 
 198         <label translate="TOOLS.TIMEZONE">Timezone</label>
 
 201           ng-model="vm.dashboarditem.attrTimezone"
 
 204           <md-option ng-value="'-12.00'">GMT-12.00</md-option>
 
 205           <md-option ng-value="'-11.00'">GMT-11.00</md-option>
 
 206           <md-option ng-value="'-10.00'">GMT-10.00</md-option>
 
 207           <md-option ng-value="'-9.00'">GMT-9.00</md-option>
 
 208           <md-option ng-value="'-8.00'">GMT-8.00</md-option>
 
 209           <md-option ng-value="'-7.00'">GMT-7.00</md-option>
 
 210           <md-option ng-value="'-6.00'">GMT-6.00</md-option>
 
 211           <md-option ng-value="'-5.00'">GMT-5.00</md-option>
 
 212           <md-option ng-value="'-4.00'">GMT-4.00</md-option>
 
 213           <md-option ng-value="'-3.30'">GMT-3.30</md-option>
 
 214           <md-option ng-value="'-3.00'">GMT-3.00</md-option>
 
 215           <md-option ng-value="'-2.00'">GMT-2.00</md-option>
 
 216           <md-option ng-value="'-1.00'">GMT-1.00</md-option>
 
 217           <md-option ng-value="'0.00'">GMT 0.00</md-option>
 
 218           <md-option ng-value="'1.00'">GMT+1.00</md-option>
 
 219           <md-option ng-value="'2.00'">GMT+2.00</md-option>
 
 220           <md-option ng-value="'3.00'">GMT+3.00</md-option>
 
 221           <md-option ng-value="'3.30'">GMT+3.30</md-option>
 
 222           <md-option ng-value="'4.00'">GMT+4.00</md-option>
 
 223           <md-option ng-value="'4.30'">GMT+4.30</md-option>
 
 224           <md-option ng-value="'5.00'">GMT+5.00</md-option>
 
 225           <md-option ng-value="'5.30'">GMT+5.30</md-option>
 
 226           <md-option ng-value="'5.45'">GMT+5.45</md-option>
 
 227           <md-option ng-value="'6.00'">GMT+6.00</md-option>
 
 228           <md-option ng-value="'6.30'">GMT+6.30</md-option>
 
 229           <md-option ng-value="'7.00'">GMT+7.00</md-option>
 
 230           <md-option ng-value="'8.00'">GMT+8.00</md-option>
 
 231           <md-option ng-value="'9.00'">GMT+9.00</md-option>
 
 232           <md-option ng-value="'9.30'">GMT+9.30</md-option>
 
 233           <md-option ng-value="'10.00'">GMT+10.00</md-option>
 
 234           <md-option ng-value="'11.00'">GMT+11.00</md-option>
 
 235           <md-option ng-value="'12.00'">GMT+12.00</md-option>
 
 236           <md-option ng-value="'13.00'">GMT+13.00</md-option>
 
 239           ng-messages="dashboarditemForm['attrTimezone'].$error"
 
 240           ng-show="dashboarditemForm['attrTimezone'].$touched"
 
 243           <div ng-message="required">
 
 244             <span translate="TOOLS.ERRORS.TIMEZONE_REQUIRED"
 
 245               >Timezone field is required</span
 
 249       </md-input-container>
 
 251         ng-if="vm.dashboarditem.type == 'counter'"
 
 254         <label translate="TOOLS.METRIC">Metric</label>
 
 257           ng-model="vm.dashboarditem.attrMetric"
 
 260           <md-option ng-value="'total'">
 
 261             {{ 'TOOLS.TOTAL' | translate }}
 
 264           <md-option ng-value="'abandoned'">
 
 265             {{ 'TOOLS.ABANDONED' | translate }}
 
 268           <md-option ng-value="'waiting'">
 
 269             {{ 'TOOLS.WAITING' | translate }}
 
 272           <md-option ng-value="'talking'">
 
 273             {{ 'TOOLS.TALKING' | translate }}
 
 276           <md-option ng-value="'answered'">
 
 277             {{ 'TOOLS.ANSWERED' | translate }}
 
 280           <md-option ng-value="'unmanaged'">
 
 281             {{ 'TOOLS.UNMANAGED' | translate }}
 
 285           ng-messages="dashboarditemForm['attrMetric'].$error"
 
 286           ng-show="dashboarditemForm['attrMetric'].$touched"
 
 289           <div ng-message="required">
 
 290             <span translate="TOOLS.ERRORS.METRIC_REQUIRED"
 
 291               >Metric field is required</span
 
 295       </md-input-container>
 
 297         ng-if="['multibar-chart', 'pie-chart'].includes(vm.dashboarditem.type)"
 
 300         <label translate="TOOLS.SERIE1">Serie1</label>
 
 303           ng-model="vm.dashboarditem.attrSerie1"
 
 306           <md-option ng-value="'total'">
 
 307             {{ 'TOOLS.TOTAL' | translate }}
 
 310           <md-option ng-value="'abandoned'">
 
 311             {{ 'TOOLS.ABANDONED' | translate }}
 
 314           <md-option ng-value="'waiting'">
 
 315             {{ 'TOOLS.WAITING' | translate }}
 
 318           <md-option ng-value="'talking'">
 
 319             {{ 'TOOLS.TALKING' | translate }}
 
 322           <md-option ng-value="'answered'">
 
 323             {{ 'TOOLS.ANSWERED' | translate }}
 
 326           <md-option ng-value="'unmanaged'">
 
 327             {{ 'TOOLS.UNMANAGED' | translate }}
 
 331           ng-messages="dashboarditemForm['attrSerie1'].$error"
 
 332           ng-show="dashboarditemForm['attrSerie1'].$touched"
 
 335           <div ng-message="required">
 
 336             <span translate="TOOLS.ERRORS.SERIE1_REQUIRED"
 
 337               >Serie1 field is required</span
 
 341       </md-input-container>
 
 343         ng-if="['multibar-chart', 'pie-chart'].includes(vm.dashboarditem.type)"
 
 346         <label translate="TOOLS.SERIE2">Serie2</label>
 
 347         <md-select name="attrSerie2" ng-model="vm.dashboarditem.attrSerie2">
 
 348           <md-option ng-value="'null'">
 
 349             {{ 'TOOLS.NONE' | translate }}
 
 352           <md-option ng-value="'total'">
 
 353             {{ 'TOOLS.TOTAL' | translate }}
 
 356           <md-option ng-value="'abandoned'">
 
 357             {{ 'TOOLS.ABANDONED' | translate }}
 
 360           <md-option ng-value="'waiting'">
 
 361             {{ 'TOOLS.WAITING' | translate }}
 
 364           <md-option ng-value="'talking'">
 
 365             {{ 'TOOLS.TALKING' | translate }}
 
 368           <md-option ng-value="'answered'">
 
 369             {{ 'TOOLS.ANSWERED' | translate }}
 
 372           <md-option ng-value="'unmanaged'">
 
 373             {{ 'TOOLS.UNMANAGED' | translate }}
 
 377           ng-messages="dashboarditemForm['attrSerie2'].$error"
 
 378           ng-show="dashboarditemForm['attrSerie2'].$touched"
 
 381           <div ng-message="required">
 
 382             <span translate="TOOLS.ERRORS.SERIE2_REQUIRED"
 
 383               >Serie2 field is required</span
 
 387       </md-input-container>
 
 389         ng-if="['multibar-chart', 'pie-chart'].includes(vm.dashboarditem.type)"
 
 392         <label translate="TOOLS.SERIE3">Serie3</label>
 
 393         <md-select name="attrSerie3" ng-model="vm.dashboarditem.attrSerie3">
 
 394           <md-option ng-value="'null'">
 
 395             {{ 'TOOLS.NONE' | translate }}
 
 398           <md-option ng-value="'total'">
 
 399             {{ 'TOOLS.TOTAL' | translate }}
 
 402           <md-option ng-value="'abandoned'">
 
 403             {{ 'TOOLS.ABANDONED' | translate }}
 
 406           <md-option ng-value="'waiting'">
 
 407             {{ 'TOOLS.WAITING' | translate }}
 
 410           <md-option ng-value="'talking'">
 
 411             {{ 'TOOLS.TALKING' | translate }}
 
 414           <md-option ng-value="'answered'">
 
 415             {{ 'TOOLS.ANSWERED' | translate }}
 
 418           <md-option ng-value="'unmanaged'">
 
 419             {{ 'TOOLS.UNMANAGED' | translate }}
 
 423           ng-messages="dashboarditemForm['attrSerie3'].$error"
 
 424           ng-show="dashboarditemForm['attrSerie3'].$touched"
 
 427           <div ng-message="required">
 
 428             <span translate="TOOLS.ERRORS.SERIE3_REQUIRED"
 
 429               >Serie3 field is required</span
 
 433       </md-input-container>
 
 435         ng-if="vm.dashboarditem.type == 'web-report'"
 
 438         <label translate="TOOLS.REPORT">Report</label>
 
 442           ng-model="vm.dashboarditem.report"
 
 445           ng-click="vm.searchReport()"
 
 448           md-font-icon="icon-magnify"
 
 449           ng-click="vm.searchReport()"
 
 450           aria-label="Search Report"
 
 453           ng-messages="dashboarditemForm['report'].$error"
 
 454           ng-show="dashboarditemForm['report'].$touched"
 
 457           <div ng-message="required">
 
 458             <span translate="TOOLS.ERRORS.REPORT_REQUIRED"
 
 459               >Report field is required</span
 
 463       </md-input-container>
 
 465         ng-if="vm.dashboarditem.type == 'web-report'"
 
 468         <label translate="TOOLS.REFRESH">Refresh</label>
 
 472           ng-model="vm.dashboarditem.attrRefresh"
 
 478           ng-messages="dashboarditemForm['attrRefresh'].$error"
 
 479           ng-show="dashboarditemForm['attrRefresh'].$touched"
 
 482           <div ng-message="required">
 
 483             <span translate="TOOLS.ERRORS.REFRESH_REQUIRED"
 
 484               >Refresh field is required</span
 
 487           <div ng-message="min">
 
 489               translate="TOOLS.ERRORS.REFRESH_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 
 490               >Refresh must be a valid greater or equal than</span
 
 495       </md-input-container>
 
 497         ng-if="['multibar-chart', 'pie-chart', 'counter'].includes(vm.dashboarditem.type)"
 
 500         <label translate="TOOLS.FILTERVOICEQUEUES">FilterVoiceQueues</label>
 
 502           name="attrVoiceQueues"
 
 503           ng-model="vm.dashboarditem.attrVoiceQueues"
 
 507             ng-value="attrVoiceQueues.id"
 
 508             ng-repeat="attrVoiceQueues in vm.voiceQueues"
 
 509             ng-disabled="attrVoiceQueues.canSelect === false"
 
 510             >{{ attrVoiceQueues.name }}</md-option
 
 514           ng-messages="dashboarditemForm['attrVoiceQueues'].$error"
 
 515           ng-show="dashboarditemForm['attrVoiceQueues'].$touched"
 
 518           <div ng-message="required">
 
 519             <span translate="TOOLS.ERRORS.FILTERVOICEQUEUES_REQUIRED"
 
 520               >FilterVoiceQueues field is required</span
 
 524       </md-input-container>
 
 526         ng-if="['counter', 'clock'].includes(vm.dashboarditem.type)"
 
 529         <label translate="TOOLS.FONTSIZE">FontSize</label>
 
 533           ng-model="vm.dashboarditem.attrFontSize"
 
 540           ng-messages="dashboarditemForm['attrFontSize'].$error"
 
 541           ng-show="dashboarditemForm['attrFontSize'].$touched"
 
 544           <div ng-message="required">
 
 545             <span translate="TOOLS.ERRORS.FONTSIZE_REQUIRED"
 
 546               >FontSize field is required</span
 
 549           <div ng-message="min">
 
 551               translate="TOOLS.ERRORS.FONTSIZE_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 
 552               >FontSize must be a valid greater or equal than</span
 
 556           <div ng-message="max">
 
 558               translate="TOOLS.ERRORS.FONTSIZE_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 
 559               >FontSize must be a valid greater or equal than</span
 
 564       </md-input-container>
 
 568         ng-model="vm.dashboarditem.foreground"
 
 569         label="{{'TOOLS.FOREGROUND' | translate}}"
 
 573         md-color-history="false"
 
 574         md-color-material-palette="false"
 
 575         md-color-alpha-channel="false"
 
 581         ng-model="vm.dashboarditem.background"
 
 582         label="{{'TOOLS.BACKGROUND' | translate}}"
 
 586         md-color-history="false"
 
 587         md-color-material-palette="false"
 
 588         md-color-alpha-channel="false"
 
 591       <md-input-container class="md-block">
 
 592         <label translate="TOOLS.LINK">link</label>
 
 593         <input type="url" name="link" ng-model="vm.dashboarditem.link" />
 
 596           ng-messages="dashboarditemForm['link'].$error"
 
 597           ng-show="dashboarditemForm['link'].$touched"
 
 600           <div ng-message="required">
 
 601             <span translate="TOOLS.ERRORS.LINK_REQUIRED"
 
 602               >link field is required</span
 
 605           <div ng-message="url">
 
 606             <span translate="TOOLS.ERRORS.LINK_MUST_VALID_URL"
 
 607               >link must be a valid url http://www.xcally.com</span
 
 611       </md-input-container>
 
 613       <div class="error-list">
 
 615           ng-repeat="error in vm.errors"
 
 618           layout-align="space-between center"
 
 621             <span class="message">{{error.message}}</span>
 
 622             <span class="type">({{error.type}})</span>
 
 624           <md-button class="md-icon-button">
 
 626               md-font-icon="icon-alert-box"
 
 627               aria-label="alert error"
 
 637       layout-align="space-between center"
 
 638       ng-if="!vm.crudPermissions.readOnly"
 
 640       <div layout="row" layout-align="start center">
 
 643           ng-if="vm.crudPermissions.canEdit && !vm.newDashboardItem"
 
 644           ng-click="vm.saveDashboardItem()"
 
 645           class="send-button md-accent md-raised"
 
 646           ng-disabled="dashboarditemForm.$invalid || dashboarditemForm.$pristine"
 
 648           translate="TOOLS.SAVE"
 
 649           translate-attr-aria-label="TOOLS.SAVE"
 
 656           ng-if="vm.crudPermissions.canEdit && vm.newDashboardItem"
 
 657           ng-click="vm.addNewDashboardItem()"
 
 658           class="send-button md-accent md-raised"
 
 659           ng-disabled="dashboarditemForm.$invalid"
 
 661           translate="TOOLS.ADD_DASHBOARDITEM"
 
 662           translate-attr-aria-label="TOOLS.ADD_DASHBOARDITEM"
 
 669           class="md-icon-button"
 
 670           ng-if="vm.crudPermissions.canDelete && !vm.newDashboardItem"
 
 671           ng-click="vm.deleteDashboardItem($event)"
 
 674           translate-attr-aria-label="TOOLS.DELETE"
 
 676           <md-icon md-font-icon="icon-delete"></md-icon>
 
 677           <md-tooltip><span translate="TOOLS.DELETE">DELETE</span></md-tooltip>